<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
        <li><el-button size="mini" type="primary" @click="handleSubmit">保存</el-button></li>
      </ul>
    </div>
    <!--折叠面板-->
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="basicInfo">
        <template slot="title">
          <span>模版基本信息</span>
          <i class="header-icon el-icon-info" />
        </template>
        <el-form ref="form" :model="data" :rules="rules" :inline="true" size="mini" label-width="125px">
          <el-row :gutter="24" class="form-item-group">
            <el-col :span="6">
              <el-form-item label="模版号：">
                <el-input v-model="data.templateId" disabled placeholder="系统自动生成" />
              </el-form-item>
            </el-col>
         <el-col :span="6">
           <el-form-item label="模版适用车辆：">
             <el-input v-model="data.materialNo" class="filter-item" disabled>
               <i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialWarehouseSelector" />
             </el-input>
           </el-form-item><!-- :customer-no="data.customerNo" -->
           <warehouse-customer-selector :visible.sync="materialWarehouseSelectorVisible"  @selected="handleMaterialWarehouseSelected" />
         </el-col>
           <!--   <el-form-item label="车型：">
                <el-select v-model="data.templateName" filterable clearable>
                  <el-option v-for="item in selects.vehicleTypes" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item> -->

           <!-- <el-col :span="6">
              <el-form-item label="结算方式：">
                <el-select v-model="data.freightBlancetype" filterable clearable>
                  <el-option v-for="item in selects.blanceTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款方式：">
                <el-select v-model="data.freightPaymenttype" filterable clearable>
                  <el-option v-for="item in selects.paymentTypeList" :key="item.key" :label="item.label" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row :gutter="24" class="form-item-group">
            <!-- <el-col :span="6">
              <el-form-item label="买家收货人：">
                <el-input v-model="data.consigneeName" class="filter-item">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="openToSelector" />
                </el-input>
                <customer-consignee-selector :visible.sync="toSelectorVisible" @selected="handleToSelected" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收货人电话：">
                <el-input v-model="data.consigneePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收货人地址：">
                <el-input v-model="data.deliveryAddress" />
              </el-form-item>
            </el-col> -->

          </el-row>


        </el-form>
      </el-collapse-item>
      <el-collapse-item name="itemInfo">
        <template slot="title">
          <span>明细信息</span>
          <i class="header-icon el-icon-info" />
        </template>
        <el-button type="primary" style="margin-top: 6px; margin-bottom: 1px;" size="mini" @click="handleItemFormDisplay">填写明细</el-button>
        <el-button v-if="itemDisplay" type="primary" style="margin-top: 6px; margin-bottom: 1px;" size="mini" @click="handleItemAdd">添加</el-button>
        <el-card v-if="itemDisplay" class="box-card">
          <el-form ref="itemForm" :model="itemData" :inline="true" size="mini" label-width="125px">
            <el-row :gutter="24" class="form-item-group">
              <el-col :span="6">
                <el-form-item label="工具编号：" >
                  <el-input v-model="itemData.materialNo" class="filter-item" >
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialSelector" />
                  </el-input>
                 </el-form-item>
                  <material-selector :visible.sync="materialSelectorVisible" @selected="handleMaterialSelected" />
              </el-col>

             <el-col :span="6">

                 <el-form-item label="工具名称：">
                   <el-input v-model="itemData.materialName"  placeholder="" />
                 </el-form-item>

              </el-col>
            <!--  <el-col :span="6">
                <el-form-item label="分类：">
                  <el-input v-model="itemData.categoryTreeNames" disabled />
                </el-form-item>
              </el-col> -->
              <el-col :span="6">
                <el-form-item label="数量：">
                  <el-input v-model="itemData.quantity" type="number" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-divider />
        <el-table
          :data="data.itemList"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="序" width="95">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工具名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.materialName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" @click="handleItemEdit(scope.row)">修改</el-button>
              <el-button type="text" @click="handleItemDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConstant from '@/constant/AppConstant'
import TreeUtils from '@/utils/TreeUtils'
import TbWmsTemplateApi from '@/api/web/TbWmsTemplateApi'
import MaterialSelector from '@/views/goods/sku/SkuSelector'

import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'
import LocationApi from '@/api/basic/LocationApi'
export default {
  directives: {
    waves
  },
  components: {
    WarehouseCustomerSelector,
    MaterialSelector
  },
  data() {
    return {
      activeNames: [
        'basicInfo',
        'itemInfo'],
      selects: {

        // vehicleTypes: []


      },
      operation: undefined,
      data: {
        isValid: appConstant.Y,
        itemList: []
      },
      // 校验规则的名称必须和校验字段的名称一致
      rules: {
        // departureIdList: [{ required: true, message: '_', trigger: 'change' }],
        // destinationIdList: [{ required: true, message: '_', trigger: 'change' }]
      },
      materialSelectorVisible: false,
      materialWarehouseSelectorVisible: false,
      // fromSelectorVisible: false,
      // toSelectorVisible: false,
      // orgSelectorVisible: false,
      itemDisplay: false,
      itemData: {
        materialNo: undefined,
        materialName: undefined,
        quantity: undefined
      },

    }
  },
  created() {
    this.initForm()
    this.loadSelects()
  },
  methods: {
    initForm() {
      const id = this.$route.params.id
      if (id) {
        this.operation = 'edit'
        TbWmsTemplateApi.get(id).then(response => {
          this.data = response.data
          // if (this.data.departCity) {
          //   this.data.departureIdList = this.data.departCity.split(',')
          // }
          // if (this.data.deliveryCity) {
          //   this.data.destinationIdList = this.data.deliveryCity.split(',')
          // }
        })
      } else {
        this.operation = 'add'
      }
    },
    loadSelects() {
      // LocationApi.list().then(response => {
      //   this.selects.locationList = TreeUtils.list2Tree(response.data)
      // })

    },
    handleSubmit() {


            TbWmsTemplateApi.insertAll(this.data).then(response => {
              this.$message.success('新增成功！')
              this.$router.go(-1)
            })


    },
    handleCancel() {
      this.$router.go(-1)
    },
    handleChange(val) {
      console.log(val)
    },
    openMaterialSelector() {
      this.materialSelectorVisible = true
    },
    openMaterialWarehouseSelector() {
      this.materialWarehouseSelectorVisible = true
    },

  handleMaterialWarehouseSelected(obj) {
      this.data.materialNo = obj.id
    },
    handleMaterialSelected(obj) {
      this.itemData.materialNo = obj.id,
       this.itemData.materialName = obj.skuName
      //{
        // materialId: obj.id,
        // materialName: obj.materialName,
        // categoryTreeNames: obj.categoryTreeNames,
        // orderQuantity: obj.orderQuantity
     // }
    },
    openFromSelector() {
      this.fromSelectorVisible = true
    },
    handleFromSelected(obj) {
      this.data.customerNo = obj.id
      this.data.customerName = obj.customerName
      this.data.salesPhone = obj.phone
      this.data.pickupAddress = obj.address
      this.data.departCity = obj.areaDesc
      if (this.data.departCity) {
        this.data.departureIdList = this.data.departCity.split(',')
      }
    },
    openToSelector() {
      this.toSelectorVisible = true
    },
    handleToSelected(obj) {
      this.data.consigneeId = obj.id
      this.data.consigneeName = obj.consigneeName
      this.data.consigneePhone = obj.linkManPhone
      this.data.deliveryAddress = obj.consigneeAddress
      this.data.deliveryCity = obj.areaDesc
      if (this.data.deliveryCity) {
        this.data.destinationIdList = this.data.deliveryCity.split(',')
      }
    },
    handleItemFormDisplay() {

      if (!this.data.materialNo) {
        this.$message.warning('请选择车型！')
        return
      }

      this.itemDisplay = !this.itemDisplay
      this.itemData = {}
    },
    handleItemAdd() {
      if (!this.itemData.materialName) {
        this.$message.warning('请选择物料！')
        return
      }
      
      // 解决itemList中所有item的内存地址一样的问题
      const data = {
        ...this.itemData
      }
      this.data.itemList.push(data)
      this.itemData = {}
      this.$message.success('添加成功！')
    },
    handleItemEdit(data) {
      this.itemDisplay = true
      this.itemData = {
        ...data
      }
      this.handleItemDelete(data)
    },
    handleLocationChange() {
      // 先清空里程
      this.data.miles = undefined
      if (this.data.departureIdList.length !== 0 && this.data.destinationIdList.length !== 0) {
        // 根据起始地和目的地，查询线路信息
        // const params = {
        //   startLocation: this.data.departureIdList.split(','),
        //   endLocation: this.data.destinationIdList.split(',')
        // }
      }
    },
    handleItemDelete(data) {
      const index = this.data.itemList.indexOf(data)
      this.data.itemList.splice(index, 1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
